<template>
  <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    <el-menu-item :index="menu.id" v-for="menu in activeMenus" @click="$router.push(menu.path)">
      <span slot="title">{{menu.name}}</span>
    </el-menu-item>
    <el-menu-item @click="logOut">
      <span slot="title">退出系统</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: "Menu",
  props:{
    userType:Number
  },
  data() {
    return {
      activeMenus: [],
      adminMenu: [
        {id:2,name: "用户管理",path:'/user'},
        {id:3,name: "茶桌管理",path:'/desk'},
        {id:4,name: "茶叶管理",path:'/tea'},
        {id:5,name: "订单管理",path:'/order'}
      ],
      userMenu: [
        {id:1,name: "首页",path:'/userDash'},
        {id:2,name: "下单",path:'/userRoom'},
        {id:3,name: "订单管理",path:'/userOrder'},
        {id:3,name: "个人中心",path:'/updateUser'}
      ]
    }
  },
  watch: {
    userType:function (val) {
      if (val===1){
        this.activeMenus=this.userMenu;
      }else{
        this.activeMenus=this.adminMenu;
      }
    }
  },
  mounted() {
    if (this.userType===1){
      this.activeMenus=this.userMenu;
    }else{
      this.activeMenus=this.adminMenu;
    }
  },
  methods:{
    logOut(){
      window.localStorage.removeItem("token");
      this.$router.push('/');
    }
  }
}
</script>

<style lang="less" scoped>
.el-menu{
  height: 100%;
  text-align: left;
  width: 99%;
}
</style>